<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Simple D3 Dev Env</title>
    <link rel="stylesheet" type="text/css" href="candlestick.css"/>
    <style>
        .container {
            height: 550px;
            width: 850px;
        }
        .ticker {
            margin: 5px;
        }
        .loading {
            background-color: rgb(248,248,248);
        }
        .candleSizeBtn {
            background-color: rgba(70, 130, 180, 0.1);
            border:1px solid rgba(70, 130, 180, 0.5);
            border-radius: 4px;
            padding: 2px;
            margin: 2px;
            text-align: center;
            font-weight: bold;
            color: #3B5998;
            white-space: nowrap;
            cursor: pointer;
        }
        .candleSizeBtn:hover {
            background-color: rgba(70, 130, 180, 0.6);
        }
    </style>
</head>
<body>
<div id="container" class="container">
    <div>
        <select id="ticker" name="ticker" class="ticker">
            <option value ="EPAM">EPAM</option>
            <option value ="GOOG">GOOG</option>
            <option value ="LXFT">LXFT</option>
            <option value ="LXFT">MSFT</option>
        </select>
        <span>
            Zoom:
            <span class="candleSizeBtn" data-field-zoom="1d">1d</span>
            <span class="candleSizeBtn" data-field-zoom="5d">5d</span>
            <span class="candleSizeBtn" data-field-zoom="1m">1m</span>
            <span class="candleSizeBtn" data-field-zoom="3m">3m</span>
            <span class="candleSizeBtn" data-field-zoom="6m">6m</span>
            <span class="candleSizeBtn" data-field-zoom="YTD">YTD</span>
        </span>
        <span>
            Period:
            <select id="period" name="period" class="period">
                <option value ="daily" data-field-ms="86400000">daily</option>
                <option value ="weekly" data-field-ms="604800000">weekly</option>
            </select>
        </span>
    </div>​
    <svg id="chart"></svg>
</div>
<script type="text/javascript" src="js/d3.js"></script>
<script type="text/javascript" src="js/quandl.js"></script>
<script type="text/javascript" src="js/CandleStickWidget.js"></script>
<script type="text/javascript">

    var dateFormat = d3.time.format('%Y-%m-%d');
    var tickersComboBox = d3.select('#ticker');
    var zoomButtons = d3.selectAll('span.candleSizeBtn');
    var periodComboBox = d3.select('#period');

    var widget = CandleStickWidget({element: '#chart'
        , width: 300
        , height: 150
        , margin: {top: 0, right: 50, bottom: 30, left: 50, top2: 10, bottom2: 10}
        , xAxisFormat: '%d %b'
        , xFocusAxisFormat: '%Y'
        , xFocusRelativeSize: 0.15
        , volChartRelSize: 0.2
        , labelTimeFormat: '%d %b %Y'
        , yAxisFormat: '.2f'
        , yScaleMargin: 0.5
        , downColor: 'rgb(208, 0, 48)'
        , upColor: 'rgb(0, 121, 39)'
        , downBarStrokeColor: 'rgba(208, 0, 48, 1)'
        , upBarStrokeColor: 'rgba(0, 121, 39, 1)'
        , downBarFillColor: 'rgba(208, 0, 48, 0.1)'
        , upBarFillColor: 'rgba(0, 121, 39, 0.1)'
        , highlightColor: '#FFD732'
        , volumeFormat: ','
    });

    var refreshChart = function(saveBrushDomain) {
        var ticker = tickersComboBox.select('option:checked').attr('value');
        var period = periodComboBox.select('option:checked').attr('value');
        var periodMs = +periodComboBox.select('option:checked').attr('data-field-ms');
        var url = getCachedQuandlUrl(ticker, period);
        console.log(url);
        d3.selectAll("#chart > *").remove();
        var container = d3.select("#container");
        container.attr('class', 'container loading');
        d3.csv(url, function(data) {
            container.attr('class', 'container');
            data.forEach(function (d) {
                d['High'] = +d['High'];
                d['Low'] = +d['Low'];
                d['Close'] = +d['Close'];
                d['Open'] = +d['Open'];
                d['Volume'] = +d['Volume'];
                d['Time'] = dateFormat.parse(d['Date']);
            });
            //console.table(data);
            widget.render(data, periodMs);
            if (saveBrushDomain && widget.getLastBrushDomain()) {
                widget.setBrushDomain(widget.getLastBrushDomain()[0], widget.getLastBrushDomain()[1]);
            } else {
                widget.setZoomBrushDomain('3m');
            }
        });
    };

    var refreshChartAndSaveBrushDomain = function() {
        refreshChart(true);
    };
    var refreshChartWithoutSaveBrushDomain = function() {
        refreshChart(false);
    };

    tickersComboBox.on('change', refreshChartWithoutSaveBrushDomain);
    periodComboBox.on('change', refreshChartAndSaveBrushDomain);
    zoomButtons.on('click', function() {
        var selected = d3.select(this);
        widget.setZoomBrushDomain(selected.attr('data-field-zoom'));
    });

    refreshChart();


//https://www.quandl.com/api/v1/datasets/WIKI/AAPL.csv?column=4&sort_order=asc&collapse=quarterly&trim_start=2012-01-01&trim_end=2013-12-31
</script>
</body>
</html>